<template>
    <div class="icons-container">
        <div class="icons-item" v-for="(item,index) in iconslist" :key="index">
          <img :src="item.url" alt="" v-if="index>4" class="imgsmall">
          <img :src="item.url" alt="" v-else>
          <p>{{item.id}}</p>
        </div>



     </div>
      </template>

      <script>
          export default {
              name: "Homeicons",
              props: [],
              components: {},
              data() {
                  return {

                    iconslist:[
                      {id:'跟团游',url:'https://dimg04.c-ctrip.com/images/300h10000000q3b862911.png'},
                      {id:'自由行',url:'https://dimg04.c-ctrip.com/images/300n10000000q0su3A810.png'},
                      {id:'定制旅行',url:'https://dimg04.c-ctrip.com/images/300f10000000q1refEF47.png'},
                      {id:'私家游',url:'https://dimg04.c-ctrip.com/images/300310000000q3gwu1ACA.png'},
                      {id:'邮轮游',url:'https://dimg04.c-ctrip.com/images/300d10000000q09eu760E.png'},
                      {id:'周边游',url:'https://pic.c-ctrip.com/VacationH5Pic/group_travel/index/small54_01.png'},
                      {id:'主题游',url:'https://pic.c-ctrip.com/VacationH5Pic/group_travel/index/small54_02.png'},
                      {id:'亲子游',url:'https://pic.c-ctrip.com/VacationH5Pic/group_travel/index/small54_03.png'},
                      {id:'奢游',url:'https://pages.c-ctrip.com/groupTravelUED/travel_homepage/%E9%B8%BF%E9%B9%84%C2%B7%E5%A5%A2%E6%B8%B8.png'},
                      {id:'机+酒',url:'https://pic.c-ctrip.com/VacationH5Pic/group_travel/index/small54_05.png'},
                      {id:'一日游',url:'https://pic.c-ctrip.com/VacationH5Pic/group_travel/index/small54_06.png'},
                      {id:'景点门票',url:'https://pic.c-ctrip.com/VacationH5Pic/group_travel/index/small54_07.png'},
                      {id:'当地向导',url:'https://pic.c-ctrip.com/VacationH5Pic/group_travel/index/small54_08.png'},
                      {id:'斌雪世界',url:'https://dimg04.c-ctrip.com/images/300t0z000000nkxrp8479.png'},
                      {id:'温泉',url:'https://dimg04.c-ctrip.com/images/30010z000000n63wa327E.png'},
                    ],

                    //swiper设置
                    swiperOption: {
                      // some swiper options/callbacks
                      // 所有的参数同 swiper 官方 api 参数
                      disableOnInteraction:false, //解决滑动后不能轮播的问题
                      pagination: {//分页小圆点
                        el: '.swiper-pagination',
                      },

                    },
                  }
              },
              methods: {},
              mounted: function () {

              },
              watch: {},
              computed: {



              },
              filters: {},
          }
      </script>

      <style lang="less" scoped>
        @import "../../../assets/css/index.less";
        .icons-container{
          width: @width;
          background-color: @headerbackgroundColor;
          box-sizing: border-box;
          display: flex;
          flex-wrap:wrap;
        }
        .icons-item{
          width: 20%;
          font-size: 0.4rem;
          text-align: center;
          padding: 0.2rem 0;
        }
        .icons-item img{
          width: 1.413rem;
          height: 1.413rem;
          font-size: 0.4rem;
          margin: 0 auto;
        }
        .icons-item .imgsmall{
          width: 0.72rem;
          height: 0.72rem;

        }
      </style>
